<template>
  <el-card class="box-card" v-loading="loading">
    <template #header>
      <div class="card-header">
        <span class="title">合同详情</span>
      </div>
    </template>
    <el-descriptions :column="3" border>
      <el-descriptions-item label="合同名称">{{ contractInfo.contractName }}</el-descriptions-item>
      <el-descriptions-item label="合同编号">{{ contractInfo.contractNumber }}</el-descriptions-item>
      <el-descriptions-item label="业主单位">{{ contractInfo.ownerUnit }}</el-descriptions-item>
      <el-descriptions-item label="项目区域">{{ contractInfo.projectRegionName }}</el-descriptions-item>
      <el-descriptions-item label="执行总裁">{{ contractInfo.presidentsName }}</el-descriptions-item>
      <el-descriptions-item label="合同签订时间">{{ parseTime(contractInfo.conSignTime, '{y}-{m}-{d}')
        }}</el-descriptions-item>
      <el-descriptions-item label="约定完成时间">{{ parseTime(contractInfo.conEndTime, '{y}-{m}-{d}')
        }}</el-descriptions-item>
      <el-descriptions-item label="合同总金额">{{ contractInfo.conAmount }}</el-descriptions-item>
      <el-descriptions-item label="是否逾期">
        <dict-tag :options="contract_is_delay" :value="contractInfo.isDelay || ''" />
      </el-descriptions-item>
      <el-descriptions-item label="合同状态">
        <dict-tag :options="contract_status" :value="contractInfo.contractStatus || ''" />
      </el-descriptions-item>
      <el-descriptions-item label="拆分状态">
        <dict-tag :options="contract_split_status" :value="contractInfo.splitStatus || ''" />
      </el-descriptions-item>
      <el-descriptions-item label="是否有延期约定">
        <dict-tag :options="contract_extension" :value="contractInfo.hasExtension || ''" />
      </el-descriptions-item>
      <el-descriptions-item label="创建人">{{ contractInfo.createBy }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ parseTime(contractInfo.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
        }}</el-descriptions-item>
    </el-descriptions>
    <el-collapse class="mt-3">
      <el-collapse-item title="合同约定工作内容" name="1">
        <div class="content-box">{{ contractInfo.conWorkContent || '' }}</div>
      </el-collapse-item>
      <el-collapse-item title="项目约定质量标准" name="2">
        <div class="content-box">{{ contractInfo.conQualityStandard || '' }}</div>
      </el-collapse-item>
      <el-collapse-item title="合同期限" name="3">
        <div class="content-box">{{ contractInfo.conPeriod || '' }}</div>
      </el-collapse-item>
      <el-collapse-item title="付款方式" name="4">
        <div class="content-box">{{ contractInfo.paymentMethod || '' }}</div>
      </el-collapse-item>
      <el-collapse-item title="合同延期约定内容" name="5">
        <div class="content-box">{{ contractInfo.extensionContent || '' }}</div>
      </el-collapse-item>
      <el-collapse-item title="合同金额备注" name="6">
        <div class="content-box">{{ contractInfo.conAmountRemark || '' }}</div>
      </el-collapse-item>
      <el-collapse-item title="备注" name="7">
        <div class="content-box">{{ contractInfo.remark || '' }}</div>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script setup lang="ts">
import { ProContractVO } from '@/api/project/init/contract/types';

const props = defineProps({
  contractInfo: {
    type: Object as () => ProContractVO,
    required: true
  }
});

const { proxy } = getCurrentInstance() as any;
const { contract_status, contract_extension, contract_is_delay, contract_split_status } = toRefs<any>(
  proxy?.useDict('contract_status', 'contract_extension', 'contract_is_delay', 'contract_split_status')
);

const loading = ref(false);
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 16px;
    font-weight: bold;
  }
}

.mt-3 {
  margin-top: 12px;
}

.content-box {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  min-height: 60px;
  white-space: pre-wrap;
}

:deep(.el-descriptions__label) {
  width: 120px;
}

:deep(.el-collapse-item__header) {
  font-weight: bold;
}
</style>
